<template>
    <div style="overflow: auto">
        <win-button></win-button>
        <div class="header-button">
            <Button @click="save">保存</Button>
            <Button @click="release">发布</Button>
            <Button @click="preview">预览</Button>
        </div>
        <Divider/>
        <Row type="flex" justify="space-around">
            <Col span="19">
                <Form :label-width="80">
                    <FormItem label="文章标题">
                        <Input v-model="title" placeholder="文章标题"></Input>
                    </FormItem>
                </Form>
                <Form :label-width="80" inline>
                    <FormItem label="文章作者">
                        <Input v-model="author" placeholder="文章作者"></Input>
                    </FormItem>
                    <FormItem label="开启评论">
                        <i-switch v-model="commentary" :true-value="1" :false-value="0" size="large">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>
                    </FormItem>
                </Form>
                <div id="editToolbar">
                </div>
                <div id="editContent">
                    <p></p>
                </div>
            </Col>

            <Col span="4">
                <Form label-position="top">
                    <FormItem label="文章栏目">
                        <Select v-model="catalogId">
                            <Option v-for="catalog in catalogList" :value="catalog.bId">{{ catalog.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="文章摘要">
                        <Input v-model="summary" type="textarea" :autosize="{minRows: 7,maxRows: 7}"
                               placeholder="Enter something..."></Input>
                    </FormItem>
                </Form>
                <img :src="logoUrl" height="100px"/>
                <Upload :action="uploadUrl" @on-success="onSuccess">
                    <Button icon="ios-cloud-upload-outline">文章Logo</Button>
                </Upload>
            </Col>
        </Row>

    </div>
</template>

<script>
    const {ipcRenderer} = require('electron')

    import WangEditor from 'wangeditor'

    import WinButton from '../../Common/WinButton'

    var xss = require('xss');

    export default {
        name: "ArticleCreate",
        props: [],
        components: {WinButton},
        data() {
            return {
                wangEditor: null,
                catalogId: this.$route.params.catalogId,
                articleId: this.$route.params.articleId,
                title: "",
                content: "",
                summary: "",
                logoUrl: "https://hbimg.huabanimg.com/6e59685a911d315b8f192f1c913a0b0c3274417c10f2c-nDX9Ny_fw658",
                uploadUrl: this.apiBase + "/blog/file/upload",
                author: "",
                commentary: 0,
                catalogList: [],
                state: 0,
                sort: 10000
            }
        },
        methods: {
            onSuccess(response, file, fileList) {
                if (response.data.code == 200) {
                    this.logoUrl = response.data.data.file.url;
                    this.logoUrl.info("上传成功");
                } else {
                    this.$Message.error("上传失败");
                }
            },
            save() {
                this.checkParam();
                this.getContent();
                if (this.articleId == "0") {
                    this.$http({
                        method: 'post',
                        url: this.apiBase + '/blog/article/create',
                        data: {
                            cId: this.catalogId,
                            title: this.title,
                            content: this.content,
                            author: this.author,
                            summary: this.summary,
                            commentary: this.commentary,
                            state: this.state,
                            sort: this.sort
                        }
                    })
                        .then(response => {
                            if (response.data.code == 200) {
                                this.$Message.info("保存文章成功");
                                WinButton.methods.closeWindow();
                            } else {
                                this.$Message.error("保存文章失败");
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        })
                } else {
                    this.$http({
                        method: 'post',
                        url: this.apiBase + '/blog/article/update',
                        data: {
                            cId: this.catalogId,
                            bId: this.articleId,
                            title: this.title,
                            content: this.content,
                            author: this.author,
                            summary: this.summary,
                            commentary: this.commentary,
                            state: this.state,
                            sort: this.sort
                        }
                    })
                        .then(response => {
                            if (response.data.code == 200) {
                                this.$Message.info("保存文章成功");
                                WinButton.methods.closeWindow();
                            } else {
                                this.$Message.error("保存文章失败");
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        })
                }
            },
            release() {
                this.state = 1;
                this.save()
            },
            preview() {
                ipcRenderer.send('to-createCommonWindow', this.apiBase + "/article/" + this.articleId)
            },
            getContent: function () {
                //xss攻击过滤
                // var filterHtml = xss(this.editorContent);
                this.content = this.editorContent;
            },
            checkParam() {
                if ("0" == this.catalogId || this.catalogId == null) {
                    this.$Message.info("请选择一个栏目！")
                    return false
                }
            },
            getCatalogList: function () {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/catalog/list',
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.catalogList = response.data.data.catalogs
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            getArticle() {
                if ("0" != this.articleId) {
                    this.$http({
                        method: 'get',
                        url: this.apiBase + '/blog/article/select/' + this.articleId,
                        data: {}
                    })
                        .then(response => {
                            if (response.data.code == 200) {
                                this.title = response.data.data.article.title
                                this.content = response.data.data.article.content
                                this.wangEditor.txt.html(response.data.data.article.content)
                                this.summary = response.data.data.article.summary
                                this.logoUrl = response.data.data.article.logoUrl
                                this.author = response.data.data.article.author
                                this.commentary = response.data.data.article.commentary
                                this.state = response.data.data.article.state
                                this.sort = response.data.data.article.sort
                            } else {
                                this.$Message.error("获取文章失败");
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        })
                }
            },
            getLoginUser(response) {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/login/user',
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.author = response.data.data.loginUser.username;
                        }
                        if (response.data.code == 401) {
                            ipcRenderer.send('to-loginWindow', "to-loginWindow")
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            }
        },
        mounted() {
            this.wangEditor = new WangEditor('#editToolbar', '#editContent')
            this.wangEditor.customConfig.onchange = (html) => {
                this.editorContent = html
            }
            this.wangEditor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
            // editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器
            this.wangEditor.create()
        },
        created() {
            this.getLoginUser();
            this.getCatalogList();
            this.getArticle();
        }
    }
</script>

<style scoped>
    .header-button {
        margin-left: 20px;
    }

    #editToolbar {
        border: 1px solid #ccc;
    }

    #editContent {
        border: 1px solid #ccc;
        height: 600px;
    }
</style>